<template>
  <el-table :data="data" style="width: 100%">
    <template
      v-for="(item, index) in colInfo"
      :key="index"
    >
      <!--不带插槽的列-->
      <el-table-column
        v-if="item.slotName == ''"
        v-bind="item"
      >
      </el-table-column>
      <!--带插槽的列-->
      <el-table-column
        v-else
        v-bind="item"
      >
        <template #default="scope">
          <slot :name="item.slotName" v-bind="scope"></slot>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
  import { reactive, useSlots } from 'vue'
  import { ElTable, ElTableColumn } from 'element-plus'

</script>

<script setup>

  const props = defineProps({
    colInfo: Object,
    data: Array
  })
 
  // 获取插槽信息
  const slots = useSlots()
  console.log('slots', slots)

  // 检查插槽，设置名称
  const colInfo = props.colInfo

  colInfo.forEach(col => {
    const _slotName = 'td_' + col.prop
    if (typeof slots[_slotName] === 'function') {
      // 有插槽
      col.slotName = _slotName
    } else {
      // 没有插槽
      col.slotName = ''
    }
  })
     
</script>